<template>
  <div class="white">
    <template v-if="type == 1">
        <el-row>
            <el-form ref="ruleForm"  :model="form" label-width="150px" size="small" :rules="rules">
                <el-col :xs="24" :span="12">
                    <el-form-item label="竞拍模式:" prop="jp" >
                        <el-select v-model="form.jp" @change="change" >
                        <el-option label="竞价" value="1" ></el-option>
                        <el-option label="竞量" value="2" ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :span="12">
                    <el-form-item label="评审模式:"  prop="ps">
                        <el-select v-model="form.ps" >
                        <el-option label="多轮报价" value="shanghai"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :span="12">
                    <el-form-item label="价格浮动范围:"  prop="price">
                        <el-row>
                            <el-col :xs="24" :span="4"><el-input v-model="form.price1" ></el-input></el-col>
                            <el-col :xs="24" :span="2"><span>-</span></el-col>
                            <el-col :xs="24" :span="4"><el-input v-model="form.price2" ></el-input></el-col>
                            <el-col :xs="24" :span="2"><span>元</span></el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :span="12">
                    <el-form-item label="多次出价次数:"  prop="bid">
                        <el-select v-model="form.bid">
                        <el-option label="不限" value="shanghai"></el-option>
                        <el-option label="3次" value="beijing"></el-option>
                        <el-option label="5次" value="beijing"></el-option>
                        <el-option label="7次" value="beijing"></el-option>
                        </el-select>
                        <span>次</span>
                    </el-form-item>
                </el-col>
                <el-col  :xs="24" :span="12" >
                    <el-form-item label="最小加量幅度:" prop="quality">
                        <el-row>
                            <el-col :xs="24" :span="12"><el-input v-model="form.quality" ></el-input></el-col>
                            <el-col :xs="24" :span="2"><span>吨</span></el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :span="12">
                    <el-form-item label="最小加价幅度:"  prop="price3">
                        <el-row>
                            <el-col :xs="24" :span="12"><el-input v-model="form.price3" :disabled="form.jp!='1'"></el-input></el-col>
                            <el-col :xs="24" :span="2"><span>元</span></el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :span="12">
                    <el-form-item label="是否展示最高价格:" v-show="form.jp=='1'">
                        <el-radio v-model="radio" label="1">是</el-radio>
                        <el-radio v-model="radio" label="2">否</el-radio>
                    </el-form-item>
                    <el-form-item label="是否展示最高价格:" v-show="form.jp!='1'">
                    <el-radio disabled  v-model="radio3" label="1">是</el-radio>
                    <el-radio disabled  v-model="radio3" label="2">否</el-radio>
                </el-form-item>
                </el-col>
                <el-col :xs="24" :span="12">
                    <el-form-item label="竞拍开始时间:">
                        <el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :span="12">
                    <el-form-item label="是否需要交纳保证金:" aria-disabled="ture">
                        <el-radio  v-model="radio2" label="1">是</el-radio>
                        <el-radio  v-model="radio2" label="2">否</el-radio>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :span="12">
                    <el-form-item label="竞拍结束时间:">
                        <el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form>
            </el-row>
    </template>
    <!-- <template v-else>
      <el-row>
        <el-form ref="ruleForm"  :model="form" label-width="140px" size="small" :rules="rules">
            <el-col :xs="24" :span="12">
                <el-form-item label="竞拍模式" prop="jp">
                    <el-select v-model="form.jp" @change="change">
                    <el-option label="竞价" value="1"></el-option>
                    <el-option label="竞量" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :span="12">
                <el-form-item label="评审模式"  prop="ps">
                    <el-select v-model="form.ps" >
                    <el-option label="多伦报价" value="shanghai"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :span="12">
                <el-form-item label="价格浮动范围"  prop="price">
                    <el-row>
                        <el-col :xs="24" :span="4"><el-input v-model="form.price1" ></el-input></el-col>
                        <el-col :xs="24" :span="2"><span>-</span></el-col>
                        <el-col :xs="24" :span="4"><el-input v-model="form.price2" ></el-input></el-col>
                        <el-col :xs="24" :span="2"><span>元</span></el-col>
                    </el-row>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :span="12">
                <el-form-item label="多次出价次数"  prop="bid">
                    <el-select v-model="form.bid">
                    <el-option label="不限" value="shanghai"></el-option>
                    <el-option label="3次" value="beijing"></el-option>
                    <el-option label="5次" value="beijing"></el-option>
                    <el-option label="7次" value="beijing"></el-option>
                    </el-select>
                    <span>次</span>
                </el-form-item>
            </el-col>
            <el-col  :xs="24" :span="12" >
                <el-form-item label="最小加量幅度" prop="quality">
                    <el-row>
                        <el-col :xs="24" :span="12"><el-input v-model="form.quality" ></el-input></el-col>
                        <el-col :xs="24" :span="2"><span>吨</span></el-col>
                    </el-row>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :span="12">
                <el-form-item label="最小加价幅度"  prop="price3" >
                    <el-row>
                        <el-col :xs="24" :span="12"><el-input v-model="form.price3" :disabled="isprice"></el-input></el-col>
                        <el-col :xs="24" :span="2"><span>元</span></el-col>
                    </el-row>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :span="12">
                <el-form-item label="是否展示最高价格">
                    <el-radio disabled  v-model="radio3" label="1">是</el-radio>
                    <el-radio disabled  v-model="radio3" label="2">否</el-radio>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :span="12">
                <el-form-item label="竞拍开始时间">
                    <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :span="12">
                <el-form-item label="是否需要交纳保证金" aria-disabled="ture">
                    <el-radio v-model="radio4" label="1">是</el-radio>
                    <el-radio v-model="radio4" label="2">否</el-radio>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :span="12">
                <el-form-item label="竞拍结束时间">
                    <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
        </el-form>
      </el-row>
    </template> -->
  </div>
</template>

<script>
  export default {
    data() {
    var checkMount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('加价幅度不能为空'));
      }
      setTimeout(() => {
          if (value % 10 != 0) {
            callback(new Error('必须10的倍数'));
          } else {
            if(value.length>4) {
              callback(new Error('不能超过4位数'));
            }else{
            callback();
            }
          }
      }, 500);
    };
    var checkJg= (rule, value, callback) => {
      if (!value) {
        return callback(new Error('加量幅度不能为空'));
      }
      setTimeout(() => {
        if (value % 10 != 0) {
          callback(new Error('必须10的倍数'));
        } else {
          if(value.length>4) {
            callback(new Error('不能超过4位数'));
          }else{
          callback();
          }
        }
      }, 500);
    };
      return {
        type: '1',
        radio: '1',
        radio2: '1',
        radio3: '2',
        radio4: '1',
        value1: '',
        value2: '',
        form: {
          name: '',
          jp: '竞价',
          ps: '多轮报价',
          price1: '-100',
          price2: '500',
          bid: '不限',
          quality: '10',
          price3: '10',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
        jp:[{  message: '请选择竞拍模式', trigger: 'change' }],
        ps:[{  message: '请选择评审方式', trigger: 'change'}],
        quality:[{validator: checkJg, trigger: 'blur'}],
        price3:[{validator: checkMount, trigger: 'blur'}]
      }
      }
    },
    mounted(){
        this.form.jp='1'    
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      change(){       
        // this.type=!this.type
        console.log(this.form.jp)
      }
    }
  }
</script>



<style lang="scss" scoped>
span{
    position: relative;
    left: 10px;
}
.white {
width: 1000px;
}
</style>